<template>
   <div class="menu-container">
    <div class="menu-item"  @click="icona">
      <!-- 图标 -->
      <div class="icona"></div>
      <span>导入发起工资计算</span>
    </div>
    <div class="menu-item" @click="iconb">
      <div class="iconb"></div>
      <span>工资明细</span>
    </div>
    <div class="menu-item" @click="iconc">
      <div class="iconc"></div>
      <span>薪资结构</span>
    </div>
    <div class="menu-item" @click="icond">
      <div class="icond"></div>
      <span>查看全部</span>
    </div>
  </div>
  
  <div class="charts-container">
    <!-- <h1>Vue 企业薪酬看板</h1> -->
    
    <!-- <div class="chart-wrapper">
      
      <v-chart 
        class="chart"
        :option="barOption"
      />
    </div> -->
    
    <!-- <div class="chart-wrapper">
      
      <v-chart 
        class="chart"
        :option="lineOption"
      />
    </div> -->
    
    <!-- <div class="chart-wrapper">
      
      <v-chart 
        class="chart"
        :option="pieOption"
      />
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/api/request.js'
import router from '@/router'

//判断是否显示弹窗
let isVisible = ref(false)

let title=ref("");

let refTable=()=>{
    isVisible.value = false
    loadData();
}

let icona = (route) => {
    isVisible.value = false
    window.location.href="/salary/outsize"
    
    
}

let iconb = (route) => {
    isVisible.value = false
    window.location.href="/salary/details"
    
    
}

let iconc = (route) => {
    isVisible.value = false
    window.location.href="/salary/setup/empdisposition"
    
    
}

let icond = (route) => {
    isVisible.value = true
    router.push("/salary/enterprise/more")
    
}

// 模拟数据
const chartData = ref({
  categories: ['20301', '20302', '20303', '20304'],
  series1: [106820.00,107420.00,141730.00,141700.00],
  series2: [139838.64,140438.64,141738.64,141738.64],
  
  pieData: [
    { name: '人事', value: 35 },
    { name: '后勤', value: 25 },
    { name: '销售', value: 20 },
    { name: '财务', value: 15 },
    { name: '安保', value: 5 }
  ]
})
let yf =()=>{
    request({
      url:'/salary/setup/empdisposition/list',
      method:'get'
  }).then(res={

  })
}
  let wx =()=>{ request({
      url:'/salary/setup/rate',
      method:'get'
  }).then(res={

  })

  }
// 柱状图配置
// const barOption = ref({
//   title: {
//     text: '月发薪数据'
//   },
//   tooltip: {},
//   legend: {
//     data: ['产品A']
//   },
//   xAxis: {
//     data: chartData.value.categories
//   },
//   yAxis: {},
//   series: [
//     {
//       name: '产品A',
//       type: 'bar',
//       data: chartData.value.series1
//     }
//   ]
// })

// 折线图配置
const lineOption = ref({
  title: {
    text: '月发薪趋势'
  },
  tooltip: {},
  legend: {
    data: ['企业应发','发薪成本']
  },
  xAxis: {
    data: chartData.value.categories
  },
  yAxis: {},
  series: [
    {
      name: '企业应发',
      type: 'line',
      data: chartData.value.series1,
      smooth: true
    },
    {
      name: '发薪成本',
      type: 'line',
      data: chartData.value.series2,
      smooth: true
    }
  ]
})

// 饼图配置
// const pieOption = ref({
//   title: {
//     text: '岗位薪资占比'
//   },
//   tooltip: {},
//   legend: {
//     orient: 'vertical',
//     left: 10,
//     data: chartData.value.pieData.map(item => item.name)
//   },
//   series: [
//     {
//       name: '销量',
//       type: 'pie',
//       radius: '70%',
//       data: chartData.value.pieData
//     }
//   ]
// })
</script>

<style scoped>
.charts-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.chart-wrapper {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart {
  width: 100%;
  height: 400px;
}

.menu-container {
  display: flex;
  justify-content: space-around; /* 均匀分布项目，两端有间隔 */
  align-items: center; /* 垂直居中 */
}
.menu-container2 {
  display: flex;
  justify-content: space-around; /* 均匀分布项目，两端有间隔 */
  align-items: center; /* 垂直居中 */
}
.menu-item {
  display: flex;
  flex-direction: column; /* 让图标和文字垂直排列 */
  align-items: center; /* 水平居中 */
  cursor: pointer;
}
.icona {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  background-image: url('@/assets/导入发起工资计算.png');
  /* 可根据需求设置背景图或用 iconfont 等图标库时的字体样式 */
  background-size: cover;
}

.iconb {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  background-image: url('@/assets/工资明细.png');
  /* 可根据需求设置背景图或用 iconfont 等图标库时的字体样式 */
  background-size: cover;
}

.iconc {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  background-image: url('@/assets/薪资结构.png');
  /* 可根据需求设置背景图或用 iconfont 等图标库时的字体样式 */
  background-size: cover;
}

.icond {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  background-image: url('@/assets/更多.png');
  /* 可根据需求设置背景图或用 iconfont 等图标库时的字体样式 */
  background-size: cover;
}
</style>
